<template>
  <div class="finance-a">
    <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" :border="false" />
    <div>
      <div class="headerbox">
        <div class="allbox" @click="isshow">
          <van-cell title="" :value="shop" is-link arrow-direction="down" />
        </div>
        <!-- <van-search v-model="value" shape="round" background="#fff" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" /> -->
      </div>
      <div class="timebox" @click="timeshow">
        <div>{{ date }}</div>
      </div>
      <div class="typebox">
        <div class="typeone">
          <div>收入金额</div>
          <br>
          <div class="typetxt">￥{{money}}</div>
        </div>
        <div class="typeone">
          <div>现有门店</div>
          <br>
          <div class="typetxt">{{allnum}}</div>
        </div>
      </div>
      <div class="desbox">
        <div class="title">收入组成</div>
        <div class="radie" style="width: 100%; height: 300px; margin: 0 auto" id="main"></div>
      </div>
      <div class="desbox">
        <div class="title">详细数据</div>
        <el-table :data="tableData" border style="width: 100%;font-size: 0.3rem;">
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="shopname" label="门店" align="center" />
          <el-table-column prop="total" label="总笔数" align="center" />
          <el-table-column prop="itemfee" label="营收金额/元" align="center" />
        </el-table>
        <br>
        <div class="block">
          <el-pagination background layout="prev, pager, next" :page-size="4" :total="shopnum" @current-change='changepage' />
        </div>
      </div>
      <div class="desbox">
        <div class="title">门店概况</div>
        <br>
        <div class="content">按金额： 当月产生收入的门店有 {{num.length}} 家</div>
        <br>
      </div>
    </div>
    <!-- 选择店铺 -->
    <van-popup v-model="show" round position="bottom">
      <van-picker title="选择店铺" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
    <!-- 日历 -->
    <van-calendar v-model="caleshow" type="range" :allow-same-day="true" :min-date="minDate" :max-date="maxDate" color="#ff7a21" @confirm="DateConfirm" />
  </div>
</template>

<script>
// import { Toast } from "vant";
import * as echarts from "echarts";
export default {
  name: "FinanceA",
  data () {
    return {
      shopid: '',
      shopname: '',
      money: 0,
      num: 0,
      allnum: 0,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(2050, 0, 31),
      shop: "全部店铺",
      date: "全部概况",
      caleshow: false,
      value: "",
      show: false,
      columns: [],
      tableData: [],
      binlist: [],
      shopnum: 0,
      groupedArray: [],
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'controls' })
    },
    changepage (v) {
      this.tableData = this.groupedArray[v - 1]
    },
    // onSearch () {
    //   this.$axios(`https://ddt.ganmiaoedu.com/ddtshops/currency/findDdtShops?title=${this.value}`)
    //     .then((res) => {
    //       if (res.data.list.length == 0) {
    //         Toast.fail('没有符合的店铺')
    //         return
    //       }
    //       this.columns = res.data.list.reverse().map((v) => {
    //         return {
    //           text: v.shopname,
    //           id: v.id,
    //         };
    //       });
    //       this.show = true
    //     })
    // },
    close () {
      this.shopid = ''
      this.initData()
    },
    // 分页
    group (array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    },
    desshopinfo () {
      this.$axios("/finance/thereport")
        .then((res) => {
          this.groupedArray = this.group(res.data.data.list.shoplist, 4)
          this.tableData = this.groupedArray[0]
          this.shopnum = res.data.data.list.number
          this.money = res.data.data.amount
          this.allnum = res.data.data.count
          this.num = res.data.data.list.shoplist.map(fn => {
            return fn.itemfee != 0
          }).filter(item => {
            return item == true
          })
        })
    },
    // 饼状图数据源
    info () {
      this.$axios('/finance/reportfigure')
        .then((res) => {
          this.binlist = res.data.data.figurelist.map(v => {
            return {
              value: v.itemfee,
              name: v.shopname
            }
          })
          this.initData();
        })
    },
    // 选择店铺数据源
    shopinfo () {
      this.$axios("/finance/financeshop")
        .then((res) => {
          this.columns = res.data.data.shops.map((item) => {
            return {
              id: item.id,
              text: item.shopname,
            };
          });
        });
    },
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    DateConfirm (date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} 至 ${this.formatDate(end)}`;
      this.info(this.formatDate(start), this.formatDate(end))
      this.caleshow = false;
    },
    timeshow () {
      this.caleshow = true;
    },
    isshow () {
      this.show = true;
    },
    onConfirm (value) {
      this.shopid = value.id
      this.shopname = value.text
      this.show = false
      this.$router.push({ path: "/revenuesA", query: { id: value.id, name: value.text } });
    },
    onCancel () {
      this.value = ''
      this.shopinfo()
      this.show = false;
    },
    initData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["0%", "50%"],
            labelLine: {
              length: 10,
            },
            label: {
              formatter: "{b|{b}}{abg|}\n{hr|}\n   {per|{c}元}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                per: {
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: this.binlist,
          },
        ],
      });
    },
  },
  created () {
    this.shopinfo();
    this.desshopinfo()
  },
  mounted () {
    this.info();
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
}
.el-pager li {
  min-width: 26.5px;
}
.van-cell {
  color: #ccc;
}
.finance-a {
  .headerbox {
    display: flex;
    color: #ccc;
    .allbox {
      width: 100%;
      height: auto;
      align-self: center;
    }
  }
  .timebox {
    background: #f3f3f3;
    color: #817b78;
    padding: 20px;
    font-size: 35px;
    text-align: center;
  }
  .typebox {
    width: 100%;
    display: flex;
    padding: 20px 0;
    .typeone {
      width: 50%;
      text-align: center;
      color: rgb(110, 106, 106);
      font-size: 30px;
      &:first-child {
        border-right: 1px solid #000;
      }
      .typetxt {
        font-size: 40px;
        color: #000;
        font-weight: 550;
      }
    }
  }
  .desbox {
    .title {
      // color: #000;
      // font-size: 30px;
      // font-weight: 550;
      // margin: 10px 20px;
      background: #f3f3f3;
      color: #817b78;
      padding: 20px;
      font-size: 35px;
      text-align: center;
    }
    .content {
      font-size: 30px;
      margin: 0 40px 20px;
    }
    .block {
      /deep/ .el-pagination.is-background .btn-next,
      /deep/ .el-pagination.is-background .btn-prev,
      /deep/ .el-pagination.is-background .el-pager li {
        min-width: 0.6rem;
        min-height: 0.6rem;
        line-height: 0.6rem;
      }
    }
  }
}
</style>
